<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/details.css">
</head>

<body>
    <header class="clearfix plr30 abs">
        <!--    logo 
            制作方式有很多种，常见以下
            1.使用img
            2.使用a标签包一个img
            3.使用a标签包h1标签，img或者h制作背景 -->
        <img src="imgs/new-logo-white2.png" class=" logo fl mt18">

        <!--  菜单  -->

        <ul class=" menu abs smenu">
            <li><a href=" #">首页</a></li>
            <li class="active"><a href="#">API</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">案例</a></li>
            <li><a href="#">开发者</a></li>
        </ul>
        <!-- 登录和注册 -->
        <div class="fr mt18 right right-box f12">
            <a href="#" class="p515 c6">登录</a>
            <a href="#" class="p515 ml10">注册有礼</a>
        </div>
    </header>

    <!-- 粒子效果 -->
    <div id="grain">
        <div id="mydiv"></div>
        <!-- 详情头部 -->
        <div class="container mt105 clearfix api-title abs">
            <div class="left-box fl">

                <img src="./imgs/API11.jpg" alt="" class="API">

                <ul class="list-box clearfix mt50">
                    <li>
                        <img src="./imgs/API详情页_smallicon_01.jpg" alt="">
                        <span>103</span>
                    </li>
                    <li>
                        <img src="./imgs/API详情页_smallicon_02.jpg" alt="">
                        <span>14245</span>
                    </li>
                    <li>
                        <img src="./imgs/API详情页_smallicon_03.jpg" alt="">
                        <span>623</span>
                    </li>
                </ul>
            </div>
            <div class=" rigt-box fr">

                <p class="p-span mt5">
                    <span class="bold">身份证实名认证</span>
                    <span>支持HTTPS</span>
                    <span>企业专用</span>
                </p>

                <div class="username mt15">
                    <img src="./imgs/API详情页_03.jpg" alt="">
                    <span> 限企业实名用户使用</span>
                    <img src="./imgs/API详情页_08.jpg" alt="">
                    <span>本接口需提供应用场景审核</span>
                    <img src="./imgs/API详情页_05.jpg" alt="">
                    <span>个人实名用户无法使用</span>
                </div>

                <p class="card mt15">检测身份证姓名是否一致，身份证验证。</p>


                <!-- 选择次数 -->
                <ul class="select clearfix mt15" id="selectBox">
                    <li class="default">
                        <img src="./imgs/API17.jpg" alt="">
                        扫码测试
                        <!-- 二维码 -->
                        <div class="vcode abs">
                            <img src="./imgs/showqrcode.jpg" alt="">
                        </div>
                    </li>
                    <!-- <li class="active">4000次</li>
                    <li>8000次</li>
                    <li>40000次</li> -->
                </ul>
                <!-- 价格 -->
                <div class="mt15 c9">
                    <span class="red f18 bold">&yen;1200</span>
                    (约<span>0.3000元/次</span>),仅限企业实名使用
                </div>
                <a href="#" class="mt30">立即申请</a>
            </div>

        </div>
    </div>
    <!-- tab菜单 -->
    <div class="api-tab">
        <div class="container">
            <ul class="clearfix f18 c6" id="tab">
                <li class="active">API文档</li>
                <li>错误码参照</li>
                <li>实例代码</li>
                <li>联系我们</li>
            </ul>
        </div>
    </div>


    <!-- 主要内容 -->
    <main class="container clearfix mt50">
        <!-- 左边 -->
        <div class="left-box fl">
            <div class="on">内容1</div>
            <div>内容2</div>
            <div>内容3</div>
            <div>内容4</div>
        </div>
        <!-- 右边 -->
        <div class="right-box fr">
            <span>活动推荐/Activity</span>
            <img src="./imgs/sfz-aside1.png" alt="" class="active">
            <img src="./imgs/details-aside02.png" alt="" class="active">
            <img src="./imgs/details-aside03.png" alt="" class="active">

            <div class="love mt20">猜你喜欢</div>

            <div class="dabox rel">
                <div class="youbian mt15">
                    <div class="boder">
                        <img src="./imgs/API详情页_45.jpg" alt="">

                    </div>
                    <div class="zuobian abs">
                        <div class="mt5 ml10">短信API服务</div>
                        <div class="zuoi f12 mt5 ml10 g9">三网合一短信通道，验证...</div>
                    </div>
                </div>

                <div class="youbian">
                    <div class="boder">
                        <img src="./imgs/API详情页_26.jpg" alt="">

                    </div>
                    <div class="zuobians abs">
                        <div class="mt5 ml10">短信API服务</div>
                        <div class="zuoi f12 mt5 ml10 g9">三网合一短信通道，验证...</div>
                    </div>

                </div>

                <div class="youbian">
                    <div class="boder">
                        <img src="./imgs/API详情页_30.jpg" alt="">

                    </div>
                    <div class="zuobianss abs">
                        <div class="mt5 ml10">短信API服务</div>
                        <div class="zuoi f12 mt5 ml10 g9">三网合一短信通道，验证...</div>
                    </div>

                </div>

                <div class="youbian">
                    <div class="boder">
                        <img src="./imgs/API详情页_33.jpg" alt="">

                    </div>
                    <div class="zuobiansss abs">
                        <div class="mt5 ml10">短信API服务</div>
                        <div class="zuoi f12 mt5 ml10 g9">三网合一短信通道，验证...</div>
                    </div>

                </div>
                <!-- 开始 -->
                <div class="youbian">
                    <div class="boder">
                        <img src="./imgs/API详情页_36.jpg" alt="">

                    </div>
                    <div class="zuobianssss abs">
                        <div class="mt5 ml10">短信API服务</div>
                        <div class="zuoi f12 mt5 ml10 g9">三网合一短信通道，验证...</div>
                    </div>

                </div>
                <!-- 结束 -->
            </div>

        </div>
    </main>
    <div class="cesi"></div>


    <div class="feoter centers">
        <div class="box"> 现在注册,百万接口免费测试</div>
        <a href="#" class="mfeiy">免费注册</a>
    </div>

    <footer class="mt20">
        <div class=" footer-box clearfix">
            <dl>
                <dt>联系与支持</dt>
                <dd>400-882-7715</dd>
                <dd>售前咨询</dd>
                <dd>客服&售后</dd>
                <dd>常见问题</dd>
                <dd>极速工单</dd>
                <dd>投诉与建议</dd>

            </dl>
            <dl>
                <dt>联系与支持</dt>
                <dd>400-882-7715</dd>
                <dd>售前咨询</dd>
                <dd>客服&售后</dd>
                <dd>常见问题</dd>
                <dd>极速工单</dd>
                <dd>投诉与建议</dd>
            </dl>
            <dl>
                <dt>联系与支持</dt>
                <dd>400-882-7715</dd>
                <dd>售前咨询</dd>
                <dd>客服&售后</dd>
                <dd>常见问题</dd>
                <dd>极速工单</dd>
                <dd>投诉与建议</dd>
            </dl>
            <dl>
                <dt>联系与支持</dt>
                <dd>400-882-7715</dd>
                <dd>售前咨询</dd>
                <dd>客服&售后</dd>
                <dd>常见问题</dd>
                <dd>极速工单</dd>
                <dd>投诉与建议</dd>
            </dl>
            <dl>
                <dt>联系与支持</dt>
                <dd>400-882-7715</dd>
                <dd>售前咨询</dd>
                <dd>客服&售后</dd>
                <dd>常见问题</dd>
                <dd>极速工单</dd>
                <dd>投诉与建议</dd>
            </dl>
            <div class="footer-erweima">
                <div class="sishijiu">微信公众号</div>
                <div class="ershiqi">源码时代</div>
                <img src="./imgs/wechat-white.png" alt="">
            </div>
        </div>
        <div class="footer-bottom">
            <img src="./imgs/bei2.png" alt="">
            <img src="./imgs/bei1.png" alt="" class="btn2">
            <span class="footer-bottom">
                增值电信业务经营许可证;
                <span>蜀B2-20180596蜀ICP备15006450号-3</span>
                <span>营业执照</span>
            </span>
        </div>
    </footer>

    <script src="./js/datails.js"></script>
    <script src="./utils/utils.js"></script>

    <script src="./lib/swiper/canvas-particle.js"></script>

</body>

</html>